<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible="visible"
      :close-on-click-modal="false"
      @close="closeDialog"
      width="900px"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      class="dialogForm"
      :append-to-body="true"
    >
      <el-form :model="info" :rules="rules" ref="formData" label-width="170px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="companyName">
              <el-input
                v-model="info.companyName"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="统一社会信用代码或工商注册号"
              prop="uscc"
              class="uscc"
            >
              <el-input
                v-model="info.uscc"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法定代表人姓名" prop="boss" class="">
              <el-input
                v-model="info.boss"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="法定代表人或自然人身份证号"
              prop="bossIdcard"
              class="uscc"
            >
              <el-input
                v-model="info.bossIdcard"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="涉及金额" prop="arrearage">
              <el-input
                v-model="info.arrearage"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认定部门" prop="thatDepartment">
              <el-input
                v-model="info.thatDepartment"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列入日期" prop="effectiveStartDate">
              <el-date-picker
                v-model="info.effectiveStartDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退出日期" prop="effectiveEndDate">
              <el-date-picker
                v-model="info.effectiveEndDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文书号" prop="punishNumber">
              <el-input
                v-model="info.punishNumber"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年份" prop="year">
              <el-date-picker
                v-model="info.year"
                value-format="yyyy"
                type="year"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批次号" prop="batchNo">
              <el-input
                v-model="info.batchNo"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="列入名单事由" prop="reason">
              <el-input
                type="textarea"
                v-model="info.reason"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="caseCompBtn" slot="footer">
        <el-button
          type="primary"
          v-sdc
          :loading="isSaveLoading"
          class="commonBut saveBtn"
          @click="save"
          >保存</el-button
        >
        <el-button type="default" v-sdc class="commonBut" @click="finish"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'blackDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dialogTitle: {
      type: String,
      default: '修改黑名单',
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    var checkDate = (rule, value, callback) => {
      var guaranteeStartDate = this.info.effectiveStartDate
      var guaranteeEndDate = this.info.effectiveEndDate
      if (!guaranteeEndDate) {
        return callback(new Error('列入日期不能为空'))
      } else if (guaranteeStartDate > guaranteeEndDate) {
        return callback(new Error('退出日期不能小于列入日期'))
      } else {
        callback()
      }
    }
    var checkMoney = (rule, value, callback) => {
      var payTotal = this.info.arrearage
      if (!payTotal) {
        callback()
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || payTotal == 0.0 || payTotal == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else {
          if (payTotal >= 100000000000) {
            callback(new Error('金额需小于1000亿'))
          } else {
            callback()
          }
        }
      }
    }
    return {
      isSaveLoading: false,
      info: {
        companyName: '',
        uscc: '',
        boss: '',
        bossIdcard: '',
        arrearage: '',
        thatDepartment: '',
        effectiveStartDate: '',
        effectiveEndDate: '',
        punishNumber: '',
        reason: '',
        batchNo: '',
        year: '',
      },
      year: '',
      batchNo: '',
      rules: {
        companyName: [
          {
            max: 30,
            message: '最多输入30个字',
            trigger: 'blur',
            required: true,
          },
        ],
        uscc: [
          {
            max: 30,
            message: '最多输入30个字',
            trigger: 'blur',
            required: true,
          },
        ],
        boss: [
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '只能输入汉字',
            trigger: 'blur',
          },
        ],
        bossIdcard: [
          {
            pattern:
              /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message: '请输入正确的身份证号',
            trigger: 'blur',
          },
        ],
        arrearage: [{ validator: checkMoney, trigger: 'blur' }],
        thatDepartment: [{ message: '最多输入30个字', trigger: 'blur' }],
        batchNo: [
          { message: '批次号不能为空', trigger: 'blur', required: true },
        ],
        effectiveStartDate: [
          { message: '请选择列入日期', trigger: 'change', required: true },
        ],
        year: [{ message: '请选择年份', trigger: 'change', required: true }],
        effectiveEndDate: [
          { validator: checkDate, trigger: 'change', required: true },
        ],
        punishNumber: [{ max: 50, message: '最多输入50个字', trigger: 'blur' }],
        reason: [{ max: 100, message: '最多输入100个字', trigger: 'blur' }],
      },
    }
  },
  watch: {
    visible(val, old) {
      this.$nextTick(() => {
        this.$refs.formData.resetFields()
      })
      if (val && this.id) {
        this.getDetail(this.id)
      } else {
        this.info = {
          companyName: '',
          uscc: '',
          boss: '',
          bossIdcard: '',
          arrearage: '',
          thatDepartment: '',
          effectiveStartDate: '',
          effectiveEndDate: '',
          punishNumber: '',
          reason: '',
          batchNo: '',
          year: '',
        }
      }
    },
  },
  // mounted(){
  //     this.getDetail(this.id)
  // },
  methods: {
    getDetail(id) {
      this.axios
        .post('api-r/cb/detail', { id })
        .then((res) => {
          if (!res.data.hasError) {
            const {
              companyName,
              uscc,
              boss,
              bossIdcard,
              arrearage,
              year,
              batchNo,
              thatDepartment,
              effectiveStartDate,
              effectiveEndDate,
              punishNumber,
              reason,
            } = res.data.result
            this.info = {
              companyName,
              uscc,
              boss,
              bossIdcard,
              arrearage,
              year: year + '',
              batchNo,
              thatDepartment,
              punishNumber,
              reason,
              effectiveStartDate: common.GMTFormat(effectiveStartDate, 1),
              effectiveEndDate: common.GMTFormat(effectiveEndDate, 1),
            }
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    closeDialog() {
      this.finish()
    },
    save() {
      let params = this.info
      let url = ''
      if (this.id) {
        params.id = this.id
        url = 'api-r/cb/update'
      } else {
        url = 'api-r/cb/add'
      }
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.axios.post(url, params).then((res) => {
            this.isSaveLoading = false
            if (!res.data.hasError) {
              this.$message.success('保存成功')
              this.finish(1)
            } else {
              this.$message.warning(res.data.errorMsg)
            }
          })
        } else {
          return false
        }
      })
    },
    finish(index) {
      this.$emit('callback', { success: index == 1 ? true : false })
    },
  },
}
</script>

<style scoped lang="less">
/deep/.el-input {
  width: 230px;
}
/deep/.el-dialog__footer {
  height: 75px !important;
  padding: 20px !important;
  .commonBut {
    width: 90px;
  }
}
/deep/ .uscc .el-form-item__label {
  line-height: 19px;
}
</style>
